<template>
  <div class="order">
    <el-card>
      <!-- 搜索组件 -->
      <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" />

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table ref="listData" style="margin-top: 10px" :data="listData">
          <el-table-column prop="orderCode" label="订单id" />
          <el-table-column prop="userTel" label="用户" />
          <el-table-column prop="storeName" label="使用店铺" />
          <el-table-column prop="roomName" label="房间名称" />
          <el-table-column prop="useTime" label="使用时长">
            <template slot-scope="scope">
              <p class="num" v-if="scope.row.useTime<60">{{scope.row.useTime}}<span class="span1">分钟</span></p>
              <p class="num" v-else>
                  {{scope.row.h}}<span class="span1">小时&nbsp;</span>
                  {{scope.row.min}}<span class="span1">分钟</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="realPrice" label="实付金额" />
          <el-table-column prop="startTime" label="开始时间" />
          <el-table-column prop="endTime" label="结束时间" />
          <el-table-column label="订单状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.orderTotalState == 0">预约中</el-tag>
              <el-tag type="success" v-if="scope.row.orderTotalState == 1">使用中</el-tag>
              <el-tag type="info" v-if="scope.row.orderTotalState == 2">已完成</el-tag>
              <el-tag type="info" v-if="scope.row.orderTotalState == 3">已取消</el-tag>
              <el-tag type="danger" v-if="scope.row.orderTotalState == 4">待支付</el-tag>
            </template>
          </el-table-column>
         
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page_box" v-show="total>0">
        <pagination
          :page.sync="params.current"
          :limit.sync="params.size"
          @pagination="getList"
          :total="total"
          />
      </div>
    </el-card>
      
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'

import { getAfterPayOrderAdminPage, getAfterPayStoreList } from '@/api/user'
export default {
  name: 'StoreList',
  components: { SearchForm },
  data() {
    return {
      params: {
        current: 1,
        size: 10,
      },
      loading: false,
      listData: [],
      total: 0,
      mdl: {},
      storeList:[],
      hour:0,// 小时
      minute:0,// 分钟
    }
  },
  computed: {
    formItems() {
      // 状态
      const statusOptions = [
        { label: '预约中', value: 0 },
        { label: '使用中', value: 1 },
        { label: '已完成', value: 2 },
        { label: '已取消', value: 3 },
        { label: '待支付', value: 4 }
      ]

      // 构建搜索表单
      return [
        { title: '用户手机号', type: 'input', key: 'userTel', maxlength: 30 },
        { title: '选择店铺', type: 'select', key: 'storeId', options: this.storeList },
        { title: '订单状态', type: 'select', key: 'orderStatus', options: statusOptions },
        { title: '时间范围', type: 'date-range', key: 'time' }
      ]
    }
  },
  created() {
    this.getList()
    this.getStoreList()
  },
  methods: {

    // 获取店铺列表
    async getStoreList(){
      await getAfterPayStoreList().then(res=>{
        if(res.statusCode == '00000'){
          let arr = JSON.stringify(res.data).replace(/storeName/,'label')
                                            .replace(/id/,'value')
          this.storeList = JSON.parse(arr)
        }
      })
    },
    
    // 获取列表
    getList() {
      getAfterPayOrderAdminPage(this.params).then(res => {
        if (res.statusCode === '00000') {
          res.data.records.map(item=>{
            if(item.useTime<60){
              item.useTime = item.useTime
            }else{
              let obj = this.minTime(item.useTime)
              item.h = obj.h
              item.min = obj.min
            }
          })
          this.listData = res.data.records
          this.total = res.data.total

        }
      })
    },

    // 搜索按钮
    onSearch() {
      this.params.startTime = this.params.time && this.params.time[0]?this.params.time[0]:''
      this.params.endTime = this.params.time && this.params.time[1]?this.params.time[1]:''
      if(this.params.time && this.params.time.length){
        delete this.params.time
      }
      console.log(this.params)
      this.getList()
    },

    // 转成小时，分钟格式
    minTime(min) {
      let h = Math.floor(min / 60);
      min -= h * 60;
      if (min < 10) {
        min = "0" + min;
      }
      let obj = {
        min,h
      }
      return obj;
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  margin: 20px;
}
</style>
